<template>
    <view>
        <view v-for="(item,index) in items" :key="item.id" style="width: 750upx;">

            <view v-if="item.key === 0" @click="send(item.id,item.key)">
                <view class="cu-card dynamic  cu-bar bg-white solid-bottom " style="margin-top: 15upx;" :class="isCard?'no-card':''">
                    <view class="cu-item shadow">
                        <view style="padding-top: 30upx;">
                            <view>
                                <view class="flex" style="margin-left: 25upx;">
                                    <image class="cu-avatar round" :lazy-load="true" :src="item.src"></image>
                                    <view class="name">
                                        <view style="font-size: 28upx;padding-top: 10upx;">{{item.name}}</view>
                                    </view>
                                </view>

                                <view style="margin-left: 30upx;font-size:32upx;font-weight: 800;color: #333333;padding-top: 20upx;margin-right: 36.5upx;line-height: 130%;padding-bottom: 10upx;">
                                    <text>{{item.title}}</text>
                                </view>


                                <view class="text-cut" style="padding-left: 30upx;padding-right: 30upx;">
                                    <text style="font-size:26upx ;color: #333333;">{{item.content}}</text>
                                </view>

                                <view class="image" @tap.stop="previewimage(item.picture)" v-if="item.picture.length == 1">
                                    <image :lazy-load="true" :src="item.picture[index]" v-for="(itemss,index) in item.picture"
                                        :key="index" style="margin-right:15upx;border-radius: 15upx;margin-bottom: 10upx;height: 300upx;width: 400upx;"
                                        mode="aspectFill"> </image>
                                </view>


                                <view class="image" @tap.stop="previewimage(item.picture)" v-else-if="item.picture.length == 4 ">
                                    <image mode="aspectFill" :lazy-load="true" :src="item.picture[index]" v-for="(itemss,index) in item.picture"
                                        :key="index" style="height: 230upx;margin-right:15upx;width:230upx ; border-radius: 10upx;margin-bottom: 10upx;">
                                    </image>
                                </view>
                <view class="image" @tap.stop="previewimage(item.picture)" v-else>
                                    <image mode="aspectFill" :lazy-load="true" :src="item.picture[index]" v-for="(itemss,index) in item.picture"
                                        :key="index" style="height:210upx;margin-right:15upx;width:210upx ; border-radius: 10upx;margin-bottom: 10upx;">
                                    </image>
                                </view>
                                
                                <view style="display: flex;flex-direction:row;justify-content: space-between ;margin-bottom: 30upx;margin-top: 30upx;padding-left: 40upx;padding-right: 40upx;">
                                    <view class="centers">
                                        <image mode="aspectFill" class="pictures" :class="[item.dianzansrc?'actives':'']"
                                            @click.stop="dianzan(item.id,item.key,index )"></image><text class="textss">点赞{{item.dianzan}}</text>
                                    </view>
                                    <!-- @click.stop="dianzan(item.id,item.key,$event) -->
                                    <view class="center">
                                        <image src="../../static/index/pinglun.png" mode="aspectFill" class="picture"></image><text
                                            class="texts">
                                            评论{{item.pinglun}} </text>
                                    </view>
                                    <view class="center">
                                        <image src="../../static/index/guanzhu.png" mode="aspectFill" class="picture"></image><text
                                            class="texts">围观{{item.weiguan}} </text>
                                    </view>

                                </view>
                            </view>


                        </view>
                    </view>

                </view>
            </view>

            <view v-if="item.key === 1" @click="send(item.id,item.key)">

                <view class="cu-card dynamic  cu-bar bg-white solid-bottom " style="margin-top: 15upx;" :class="isCard?'no-card':''">
                    <view class="cu-item shadow">
                        <view class="">
                            <view style="padding-top: 40upx;padding-bottom: 20upx;">
                                <view class="image" @tap.stop="previewimage(item.picture)">
                                    <image :lazy-load="true" mode="aspectFill" :src="item.picture" style="height: 300upx;width:680upx;">
                                    </image>
                                </view>
                                <view style="margin-left: 36.5upx;padding-top: 20upx;margin-right: 36.5upx;line-height: 130%;padding-bottom: 10upx;">
                                    <text class="text-cut" style="font-size:35upx;font-weight: 800;color: #333333;word-spacing: 10upx;">{{item.content}}</text>
                                </view>
                            </view>


                        </view>
                    </view>

                </view>


            </view>

        </view>
        <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
    </view>
</template>

<script>
    export default {
        props: {
            getrecommend: Number
        },
        data() {
            return {
                isCard: true,
                items: [],
                // 				items: [{
                // 					key: 0,
                // 					data: 50,
                // 					src: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
                // 					picture: [
                // 						"https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
                // 						"https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png"
                // 					],
                // 					content: "LALA你好",
                // 					name: "张三",
                // 					title: "叫LALA吧",
                // 					dianzan: 0,
                // 					pinglun: 0,
                // 					weiguan: 0,
                // 					id: ""
                // 				}, {
                // 					key: 1,
                // 					data: 50,
                // 					picture: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
                // 					title: "叫LALA吧",
                // 					dianzan: 0,
                // 					pinglun: 0,
                // 					fenxiang: 0,
                // 					id: ""
                // 				}, {
                // 
                // 					key: 0,
                // 					data: 50,
                // 					src: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
                // 					picture: ["https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png"],
                // 					content: "LALA你好",
                // 					name: "张三",
                // 					title: "叫LALA吧",
                // 					dianzan: 0,
                // 					pinglun: 0,
                // 					weiguan: 0,
                // 					id: ""
                // 				}]
                loadMoreText: "加载中...",
                showLoadMore: false,
                max: 0,
                id: "",
                pageNum: 1,
            }
        },
        methods: {

            //打开列表的图片查看
            previewimage(src) {


                let srcs = []

                if (typeof src == "string") {
                    srcs[0] = src

                } else {
                    srcs = src
                }



                uni.previewImage({
                    urls: srcs,
                    indicator: "default",
                    loop: true,
                    success() {
                        console.log("图片打开成功")
                    }
                });
            },

            //获取数据，1次8条
            getdata(c, paixu = 0) {

                let pageNum = c.pageNum;
                
                
                this.$api.test({
                    url:"setgoals/GetConsult",
                    data: {
                        pageNum: pageNum,
                        pageLimit: 8,
                        type: 0
                    }
                }).then((res) =>{ 
                        
                        let x = res.data;

                        // for(let d = 0 ;d< x.length;d++){
                        // 	
                        // 	console.log(x[d].type)
                        // }

                        if (x.length == 0) {
                            c.max = 1;
                            return
                        }

                        var a = {};
                        var b = [];
                        var index = x.length - 1;

                        for (var i = 0; i < x.length; i++) {

                            if (x[i].type === "goal") {

                                a.id = x[i].iD;
                                a.picture = x[i].picture;
                                a.name = x[i].postUsername;
                                a.title = x[i].subtitle;
                                a.key = 0;
                                a.src = x[i].postHeadPortrait;
                                a.content = x[i].message;
                                a.dianzan = x[i].thumbs;
                                a.weiguan = x[i].circuessNum;
                                a.pinglun = x[i].commentNum;
                                a.dianzanjude = 0;
                                a.dianzansrc = false;
                            }

                            if (x[i].type === "consult") {

                                a.id = x[i].iD;
                                a.picture = x[i].picture[0]
                                a.title = x[i].message;
                                a.key = 1;
                                a.src = x[i].postHeadPortrait;
                                a.content = x[i].subtitle;
                                a.dianzan = x[i].thumbs;
                                a.fenxiang = x[i].circuessNum;
                                a.pinglun = x[i].commentNum;
                                a.dianzanjude = 0;
                                a.dianzansrc = false;
                            }

                            console.log(JSON.stringify(a));



                            b.unshift(JSON.parse(JSON.stringify(a)));

                        }

                        if (paixu == 0) {
                            c.items = b.concat(c.items);
                        } else {
                            c.items = c.items.concat(b);
                        }

                        //存储获得的数据，应该限定一个存储数据的最大长度，或者设定读取时最大的读取长度  

                        // 						uni.setStorage({
                        //     key: 'recommend',
                        //     data: c.items,
                        //     success: function () {
                        //         console.log('success');
                        //     }
                        // });

                    })
                .catch((err) =>{
                    
                    if(err.statusCode == 500){
                         uni.showToast({
                            title: '数据获取失败',
                            duration: 2000,
                            icon:"none",
                            position:"center"
                            
                        });
                        return;
                    }
                    
                })

                // uni.request({
                //     url: 'http://47.103.64.35:8994/GetConsult',
                //     data: {
                //         pageNum: pageNum,
                //         pageLimit: 8,
                //         type: 0
                //     },
                //     method: "GET",
                //     success: (res) => {
                //         if (res.data.status == 500) {
                //             uni.showToast({
                //                 title: '数据获取失败',
                //                 duration: 2000,
                //                 icon: "none",
                //                 position: "center"

                //             });
                //             return;
                //         }
                //         let x = res.data;

                //         // for(let d = 0 ;d< x.length;d++){
                //         // 	
                //         // 	console.log(x[d].type)
                //         // }

                //         if (x.length == 0) {
                //             c.max = 1;
                //             return
                //         }

                //         var a = {};
                //         var b = [];
                //         var index = x.length - 1;

                //         for (var i = 0; i < x.length; i++) {

                //             if (x[i].type === "goal") {

                //                 a.id = x[i].iD;
                //                 a.picture = x[i].picture;
                //                 a.name = x[i].postUsername;
                //                 a.title = x[i].subtitle;
                //                 a.key = 0;
                //                 a.src = x[i].postHeadPortrait;
                //                 a.content = x[i].message;
                //                 a.dianzan = x[i].thumbs;
                //                 a.weiguan = x[i].circuessNum;
                //                 a.pinglun = x[i].commentNum;
                //                 a.dianzanjude = 0;
                //                 a.dianzansrc = "../../static/index/aixin.png";
                //             }

                //             if (x[i].type === "consult") {

                //                 a.id = x[i].iD;
                //                 a.picture = x[i].picture[0]
                //                 a.title = x[i].message;
                //                 a.key = 1;
                //                 a.src = x[i].postHeadPortrait;
                //                 a.content = x[i].subtitle;
                //                 a.dianzan = x[i].thumbs;
                //                 a.fenxiang = x[i].circuessNum;
                //                 a.pinglun = x[i].commentNum;
                //                 a.dianzanjude = 0;
                //                 a.dianzansrc = "../../static/index/aixin.png";
                //             }

                //             console.log(JSON.stringify(a));



                //             b.unshift(JSON.parse(JSON.stringify(a)));

                //         }

                //         if (paixu == 0) {
                //             c.items = b.concat(c.items);
                //         } else {
                //             c.items = c.items.concat(b);
                //         }

                //         //存储获得的数据，应该限定一个存储数据的最大长度，或者设定读取时最大的读取长度  

                //         // 						uni.setStorage({
                //         //     key: 'recommend',
                //         //     data: c.items,
                //         //     success: function () {
                //         //         console.log('success');
                //         //     }
                //         // });

                //     },
                //     fail() {
                //         uni.showToast({
                //             title: '网络无法连接，请检查设置',
                //             duration: 2000,
                //             icon: "none",
                //             position: "center"

                //         });
                //     }
                // })

                c.pageNum++;

                //  储存页数     这里应该做下判断页里的条数是不是满的，条数不是满的不能存
                //   uni.setStorage({
                //     key: 'recommendpagenum',
                //     data: c.pageNum,
                //     success: function () {
                //         console.log('success');
                //     }
                // });


            },

            // 挑战到目标页面还是鸡汤页面
            send(id, key, src, name) {
                console.log(id);
                console.log(key);

                if (key === 0) {

                    uni.navigateTo({
                        url: "../../pages/goal/goal?id=" + id
                    })
                }
                if (key === 1) {

                    uni.navigateTo({
                        url: "../../pages/consult/consult?id=" + id + "&key=consult"
                    })

                }

            },

            // 点赞  要判断点赞的是鸡汤还是目标，要判断是已点赞还是未点赞
            dianzan(id, type, index) {

                var c = this;

                if (type == 1) {

                    if (this.items[index].dianzanjude === 0) {

                        this.dianzans(id, "consult", "0", function(data) {
                            console.log(data)
                            if (data.status === "easyui") {

                                var x = c.items[index];
                                x.dianzan = data.thumb;
                                x.dianzansrc = true;
                                x.dianzanjude = 1;
                                c.items.splice(index, 1, x);

                                uni.setStorage({
                                    key: 'recommend',
                                    data: c.items,
                                    success: function() {
                                        console.log('success');
                                    }
                                });
                            }
                        })


                    } else {
                        this.dianzans(id, "consult", "1", function(data) {

                            if (data.status === "easyui") {

                                var x = c.items[index];
                                x.dianzan = data.thumb;
                                x.dianzansrc = false;
                                x.dianzanjude = 0;
                                c.items.splice(index, 1, x);

                                uni.setStorage({
                                    key: 'recommend',
                                    data: c.items,
                                    success: function() {
                                        console.log('success');
                                    }
                                });
                            }
                        })
                    }

                }

                if (type == 0) {
                    if (this.items[index].dianzanjude === 0) {
                        this.dianzans(id, "goal", "0", function(data) {

                            if (data.status === "easyui") {

                                var x = c.items[index];
                                x.dianzan = data.thumb;
                                x.dianzansrc = true;
                                x.dianzanjude = 1;

                                c.items.splice(index, 1, x);

                                uni.setStorage({
                                    key: 'recommend',
                                    data: c.items,
                                    success: function() {
                                        console.log('success');
                                    }
                                });
                            }
                        })
                    }
                    if (this.items[index].dianzanjude === 1) {
                        this.dianzans(id, "goal", "1", function(data) {
                            console.log(data)
                            if (data.status === "easyui") {

                                var x = c.items[index];
                                x.dianzan = data.thumb;
                                x.dianzansrc = false;
                                x.dianzanjude = 0;
                                c.items.splice(index, 1, x);

                                uni.setStorage({
                                    key: 'recommend',
                                    data: c.items,
                                    success: function() {
                                        console.log('success');
                                    }
                                });
                            }
                        })

                    }
                }

            },
            dianzans(id, type, jude, yingyong) {
                
                this.$api.test({
                   url: 'setgoals/SetThumb', //仅为示例，并非真实接口地址。
                   data: {
                       id: id,
                       type: type,
                       jude: jude
                   }
                }).then((res) =>{
                    
                   console.log(res);
                  
                   yingyong(res.data)
                    
                }).catch((err)=>{
         uni.showToast({
             title: '网络无法连接，请检查设置',
             duration: 2000,
             icon:"none",
             position:"center"
             
         });
         
         
     })
                
    

               
        }
        },
        //观察数据变化，监视上拉获取数据
        watch: {
            getrecommend: function(newQuestion, oldQuestion) {

                this.$emit('reachrecommend')

                if (this.getrecommend == 1) {


                    if (this.max == 1) {
                        this.loadMoreText = "没有更多数据了!"
                        this.showLoadMore = true;
                        return;
                    }
                    this.showLoadMore = true;

                    setTimeout(() => {
                        this.getdata(this, 1);
                    }, 300);


                }

            }
        },

        //判断是否有数据，有数据就读取出来
        beforeMount() {
            // uni.getStorage({
            //     key: 'recommend',
            //     success: (res) => {
            //         this.items = res.data;
            //     },
            //     fail: () => {
            //         console.log("还没存数据");
            //         this.getdata(this);
            //     }
            // });
            this.getdata(this);
            // uni.getStorage({
            //     key: 'recommendpagenum',
            //     success:  (res) =>{
            //        this.pageNum = res.data;
            //     },
            // 	fail: () => {
            // 		console.log("还没存数据");
            // 	}
            // });
        },
        //监视下拉刷新获取数据
        mounted() {

            uni.$on('data', (data) => {
                if (data.msg = "获取数据") {
                    this.getdata(this);
                    console.log("获取数据了")
                }

            })
        }
    }
</script>

<style>
    page {
        background-color: #f7f6fc;
    }

    .picture {
        width: 40upx;
        height: 40upx;

    }

    .texts {
        color: #333333;
        margin-left: 15upx;
    }

    .textss {
        color: #333333;
        margin-left: 15upx;
        font-size: 26upx;
    }

    .center {
        display: flex;
        align-items: center;
        width: 141upx;
    }

    .centers {
        display: flex;
        align-items: center;
        width: 165upx;
    }

    .flex {
        display: flex;
        flex-direction: row;
        margin-left: 36.5upx;
    }

    .name {
        margin-left: 20upx;
        color: #999999;
    }

    .text {
        color: #33333;
        margin-left: 36.5upx;
        margin-top: 20upx;
        font-size: 18px;
        line-height: 120%;
        margin-bottom: 10upx;
    }

    .image {
        margin-left: 30upx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 690upx;
        flex-wrap: wrap;
    }

    #card {
        background-color: #eaf0f9;
    }

    #card:active {
        background-color: #eaf0f9;
    }
</style>
